<template>

  <div class="className">
    <div class="build_top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>宿舍维修信息管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card class="anoCard">

      <div slot="header">
        <span>宿舍用品维修记录</span>
      </div>
      <div class="searchDiv">
        <el-input type="text" placeholder="请输入维修类别" class="width1" v-model="sch_order"></el-input>
        <el-select v-model="sch_status" clearable class="width1" placeholde="请选择状态">
          <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
        <el-date-picker class="width1" v-model="sch_date" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="searchTab()">搜索</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addTab">添加</el-button>
      </div>
      <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="序号" width="60"></el-table-column>
        <el-table-column prop="order" label="维修类别"></el-table-column>
        <el-table-column prop="time" label="维修时间"></el-table-column>
        <el-table-column prop="address" label="需要维修寝室" width="210"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="name" label="维修员" width="70"></el-table-column>
        <el-table-column prop="status" label="状态" width="90">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | tagClass">{{
                scope.row.status | statusText
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" @click="editTable(scope.$index, scope.row)">编辑</el-button>
            <el-button type="warning" @click="toConfirm(scope.row)" :disabled="scope.row.status === 1 ? false : true">维修
            </el-button>
            <el-button type="success" @click="toSuccess(scope.row)" :disabled="scope.row.status === 2 ? false : true">完成
            </el-button>
            <el-button type="danger" @click="toDelete(scope.row)" :disabled="scope.row.status !== 3 ? false : true">取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="pageSizes" :page-size="pageSize"
        :current-page="currentPage" :total="total" class="fyDiv" @size-change="handleSize" @current-change="handlePage">
      </el-pagination>
    </el-card>

    <!-- 添加 -->
    <el-dialog title="维修添加" :visible.sync="diaIsShow" class="diaForm">
      <el-form ref="diaForm" :model="formData" :rules="rules" label-width="140px">
        <el-form-item label="序号" prop="id">
          <el-input type="text" v-model="formData.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="维修类别" prop="order">
          <el-input type="text" placeholder="请输入维修物品" v-model="formData.order"></el-input>
        </el-form-item>
        <el-form-item label="维修时间" prop="time">
          <el-date-picker v-model="formData.time" type="datetime" placeholder="选择维修时间"
            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="维修寝室地址" prop="address">
          <el-input type="text" placeholder="请输入地址" v-model="formData.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input type="text" placeholder="请输入电话" v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="维修员" prop="name">
          <el-input type="text" placeholder="请输入姓名" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status" placeholde="请选择状态">
            <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeTab('diaForm', editType)">确认</el-button>
          <el-button @click="diaIsShow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      tableData: [],
      temp: {
                id: null,
                order: "",
                time: "",
                address: "",
                phone:null,
                name: "",
                status:null, 
            },
      addDialogVisible: false,
      addForm: {
                order: "",
                time: "",
                address: "",
                phone:null,
                name: "",
                status:null, 
      },
      editDialogVisible: false,
      editForm: {
                id: null,
                order: "",
                time: "",
                address: "",
                phone:null,
                name: "",
                status:null, 
      },
      allList: [],
      schArr: [],
      sch_order: '',
      sch_status: null,
      sch_date: null,
      currentPage: 0,
      pageSize: 10,
      total: 0,
      pageSizes: [10, 20, 30, 40],
      diaIsShow: false,
      formData: {},
      editType: '',
      options: [
        { label: '待维修', value: 1 },
        { label: '维修中', value: 2 },
        { label: '已完成', value: 0 },
        { label: '已取消', value: 3 }
      ],
      rowIndex: 0,
      rules: {
        order: [{ required: true, message: '请输入维修类别', trigger: 'blur' }],
        time: [
          {
            // type: 'datetime',
            required: true,
            message: '请输入时间',
            trigger: 'change'
          }
        ],
        address: [{ required: true, message: '请输入宿舍地址', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.searchTab()
    this.getAll()
  },
  filters: {
    statusText(val) {
      if (val === undefined) return
      if (val === 0) {
        return '已完成'
      } else if (val === 1) {
        return '待维修'
      } else if (val === 2) {
        return '维修中'
      } else {
        return '已取消'
      }
    },
    tagClass(val) {
      if (val === undefined) return
      if (val === 0) {
        return 'success'
      } else if (val === 1) {
        return 'info'
      } else if (val === 2) {
        return 'warning'
      } else {
        return 'danger'
      }
    }
  },
  methods: {
    
        getAll() {
            axios.get('http://127.0.0.1/service_list/all').then(res => {
                this.tableData = res.data;
            }).catch(err => {
                console.log("获取数据失败" + err);
            })
        },
        addService() {
            let params = {
                order: this.temp.order,
                time: this.getdata.time,
                address: this.temp.address,
                 phone: this.temp. phone,
                name: this.temp.name,
                status: this.temp.status,
            }
            axios.post('http://127.0.0.1/service_list/add', params).then(res => {
                console.log(res.data);
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                this.addDialogVisible = false;
                this.clearAddForm()
                this.getAll()
            }).catch(err => {
                console.log("获取数据失败" + err);
                this.$message({
                    type: 'success',
                    message: '添加失败!'
                });
            })
        },
        updateService() {
            let Service_id = this.editForm.id
            let params = {
              id: this.temp.id,
                order: this.editForm.order,
                time: this.editForm.time,
                address: this.editForm.address,
                 phone: this.editForm. phone,
                name: this.editForm.name,
                status: this.editForm.status,
            }
            console.log(Service_id);
            axios.put(`http://127.0.0.1/service_list/update`, params).then(res => {
                console.log(res.data);
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.editDialogVisible = false
                this.getAll()
            }).catch(err => {
                console.log("获取数据失败" + err);
                this.$message({
                    type: 'success',
                    message: '修改失败!'
                });
            })
        },
        clearAddForm() {
            this.temp = {
               id: null,
                order: "",
                time: "",
                address: "",
                phone:null,
                name: "",
                status:null, 
            }
        },
        clearEditForm() {
            this.temp = {
               id: null,
                order: "",
                time: "",
                address: "",
                phone:null,
                name: "",
                status:null, 
            }
        },



    handleSize(val) {
      this.pageSize = val
      this.getPageData()
    },
    handlePage(page) {
      this.currentPage = page
      this.getPageData()
    },
   
    // 计算维修数量
    getPageData() {
      let start = (this.currentPage - 1) * this.pageSize
      let end = start + this.pageSize
      // 从已有数组中返回已选择的某段集合
      this.tableData = this.schArr.slice(start, end)
    },
    // 查找
    searchTab() {
      let arrList = []
      for (let item of this.allList) {
        if (
          this.sch_order.trim() === '' &&
          this.sch_status === null &&
          this.sch_date === null
        ) {
          arrList = this.allList
          break
        } else if (
          item.order.startsWith(this.sch_order) &&
          (this.sch_status !== null ? item.status === this.sch_status : true) &&
          (this.sch_date !== null ? item.time.startsWith(this.sch_date) : true)
        ) {
          let obj = Object.assign({}, item)
          arrList.push(obj)
        } else if (
          this.sch_order === null &&
          this.sch_status === null &&
          this.sch_date === null
        ) {
          break
        }
      }
      this.schArr = arrList
      this.total = arrList.length
      this.currentPage = 1
      this.pageSize = 10
      this.getPageData()
    },
    // 增加
    addTab() {
      this.formData = {}
      this.diaIsShow = true
      if (this.allList.length > 9) {
        this.formData.id = "00" + (this.allList.length + 1)
      } else if (this.allList.length < 9) {
        this.formData.id = "000" + (this.allList.length + 1)
      } else if (this.allList.length > 99) {
        this.formData.id = "0" + (this.allList.length + 1)
      }
      this.editType = 'add'
      this.statusText = 1
      this.$nextTick(() => {
        this.$refs.diaForm.clearValidate()
      })
    },
    // 审核
    toConfirm(row) {
      row.status = 2
      this.$notify({
        title: '成功',
        message: '维修提交成功',
        type: 'success'
      })
    },
    // 完成
    toSuccess(row) {
      row.status = 0
      this.$notify({
        title: '成功',
        message: '该维修已完成',
        type: 'success'
      })
    },
    // 取消
    toDelete(row) {
      row.status = 3
      this.$notify({
        title: '成功',
        message: '已取消该维修',
        type: 'success'
      })
    },
    // 编辑
    editTable(index, row) {
      this.formData = Object.assign({}, row)
      this.editType = 'update'
      this.diaIsShow = true
      this.$nextTick(() => {
        this.$refs.diaForm.clearValidate()
      })
      this.rowIndex = index
    },
    changeTab(form, type) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (type === 'update') {
            // 改变整个表格数据
            let start = (this.currentPage - 1) * this.pageSize
            this.allList[start + this.rowIndex] = Object.assign(
              {},
              this.formData
            )
            // 解决数组不能通过索引响应数据变化
            this.$set(
              this.tableData,
              this.rowIndex,
              Object.assign({}, this.formData)
            )
            this.$notify({
              title: '成功',
              message: '维修已修改成功',
              type: 'success'
            })
          } else {
            this.tableData.unshift(Object.assign({}, this.formData))
            this.allList.push(Object.assign({}, this.formData))
          }
          this.diaIsShow = false
        } else {
          return
        }
      })
    }
  }
 
}
</script>
<style  scoped>
.build_top {
  margin-left: -20px;
  margin-top: -20px;
  width: 100%;
  height: 40px;
  background-color: #e3e3e3;
}

.fyDiv {
  float: right;
  margin-top: 30px;
  padding-bottom: 20px;
}

.anoCard .el-table .el-button {
  padding: 8px 18px;
  font-size: 12px;
}

.searchDiv {
  margin-bottom: 20px;

}

.searchDiv .el-button {

  padding: 11px 20px;

}

.width1 {
  width: 200px;
  margin-right: 10px;
}

.diaForm .el-input {

  width: 350px;

}
</style>
<style>
.anoCard .el-card__body:after {

  content: '';
  clear: both;
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;

}

.diaForm .el-form-item__label {
  padding-right: 20px;
}

.searchDiv [class^='el-icon'] {
  color: #fff;
}
</style>
·